import React, { useEffect, useRef, useState } from 'react'
import { useOutletContext } from 'react-router-dom'
import { Form, Input, Radio, Select, Cascader, Button, MessagePlugin, DateRangePicker, Space } from 'tdesign-react';
import debounce from 'lodash/debounce';

const { FormItem } = Form;
const Setting = () => {
  const { Sumbit, tree, exam, handleExamUpdate, options } = useOutletContext()
  const [data,setdata] = useState([])
  useEffect(() => {
    setOptions()
  }, [options])
  const [form] = Form.useForm();
  const onSubmit = (e) => {
    if (e.validateResult === true) {
      Sumbit();
    }
  };
  const setOptions = ()=>{
    let arr = JSON.parse(JSON.stringify(options))
    if(arr.length>0){
      if(arr[0].label==='全选'){
        arr.shift();
        setdata(arr)
      }
    }
  }
  const onReset = (e) => {
    console.log(e);
    MessagePlugin.info('重置成功');
  };
  const valueChange = (val) => {
    handleExamUpdate(val)
  }
  const options3 = [
    {
      label: '选项一',
      value: '1',
      children: [
        {
          label: '子选项一',
          value: '1.1',
        },
        {
          label: '子选项二',
          value: '1.2',
        },
        {
          label: '子选项三',
          value: '1.3',
        },
      ],
    },
    {
      label: '选项二',
      value: '2',
      children: [
        {
          label: '子选项一',
          value: '2.1',
        },
        {
          label: '子选项二',
          value: '2.2',
        },
      ],
    },
  ];
  const fixed = [
    { label: '10分', value: 10 },
    { label: '20分', value: 20 },
    { label: '30分', value: 30 },
    { label: '40分', value: 40 },
    { label: '50分', value: 50 },
    { label: '60分', value: 60 },
    { label: '70分', value: 70 },
    { label: '80分', value: 80 },
    { label: '90分', value: 90 }
  ]
  const percentage = [
    { label: '10%', value: 10 },
    { label: '20%', value: 20 },
    { label: '30%', value: 30 },
    { label: '40%', value: 40 },
    { label: '50%', value: 50 },
    { label: '60%', value: 60 },
    { label: '70%', value: 70 },
    { label: '80%', value: 80 },
    { label: '90%', value: 90 }
  ]
  const chkthat = (e) => {
    console.log(typeof e);
    if (e === '0') {
      handleExamUpdate({ percentage: '' })
    } else {
      handleExamUpdate({ passScore: '' })
    }
  }
  return (
    <div id='setting' className='animate__animated animate__fadeInDown'>
      <Form
        form={form}
        layout="vertical"
        initialData={exam}
        onSubmit={onSubmit}
        labelWidth={100}
        onReset={onReset}
        onValuesChange={valueChange}
        scrollToFirstError="smooth"
      >
        <FormItem
          label="考试名称"
          name="name"
          labelWidth={200}
          rules={[
            {
              whitespace: true,
              message: '考试名称不能为空',
            },
            {
              required: true,
              message: '考试名称必填',
              type: 'error',
            },
            {
              min: 6,
              message: '至少需要六个字',
              type: 'error',
            },
          ]}
        >
          <Input style={{ width: '40%' }} />
        </FormItem>
        <FormItem label="开考时间/闭考时间" labelWidth={200} name="time" rules={[
          {
            required: true,
            message: '开考时间/闭考时间必填',
            type: 'error',
          }
        ]}>
          <DateRangePicker enableTimePicker allowInput clearable />
        </FormItem>
        <FormItem label='试卷分类' labelWidth={200} name='belong' rules={[
          {
            required: true,
            message: '试卷分类必填',
            type: 'error',
          }
        ]}>
          <Select options={data} style={{ width: '40%' }}></Select>
        </FormItem>
        <FormItem label='及格分数' labelWidth={200} name='pass' rules={[
          {
            required: true,
            message: '及格分数必填',
            type: 'error',
          }
        ]}>
          <Radio.Group style={{ width: '40%' }} onChange={chkthat}>
            <Radio value="0">
              <div className='flexradio'><div>按固定分值计算</div>
                <Select
                  disabled={exam.pass !== '0'}
                  style={{ width: '180px' }}
                  value={exam.passScore}
                  options={fixed}
                  onChange={(e) => handleExamUpdate({ passScore: e })}>
                </Select>
              </div>
            </Radio>
            <Radio value="1"><div className='flexradio'>
              <div>按百分比计算</div>
              <Select
                  disabled={exam.pass !== '1'}
                  style={{ width: '180px' }}
                  value={exam.percentage}
                  options={percentage}
                  onChange={(e) => handleExamUpdate({ percentage: e })}>
                </Select>
              </div>
            </Radio>
          </Radio.Group>
        </FormItem>
        <FormItem label='指定班级' labelWidth={200} name='class' rules={[
          {
            required: true,
            message: '指定班级必填',
            type: 'error',
          }
        ]}>
          <Cascader options={tree} multiple style={{ width: '40%' }} />
        </FormItem>
       {exam?.flag!==2&&
        <FormItem
        style={{
          marginLeft: 100,
        }}
      >
        <Button
          theme="primary"
          type="submit"
          style={{
            marginRight: 10,
          }}
        >
          提交
        </Button>
        <Button theme="default" variant="base" type="reset">
          重置
        </Button>
      </FormItem>
       }
      </Form>
    </div>
  )
}

export default Setting
